import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames'
import {ErrorMessage} from '../Validation'
import {observer} from 'mobx-react'
import {InputBase} from './InputBase'

@observer
export class Textarea extends InputBase {

    static propTypes = {
        rows: PropTypes.number,
        cols: PropTypes.number,
    }

    static defaultProps = {
        rows: 5
    }

    render() {
        const {
            showErrors,
            title,
            maxLength,
            disabled,
            className,
            readOnly,
            rows,
            cols,
        } = this.props
        const {invalid, errors, value, validated} = this.store
        return <div className={classNames('input', {'has-errors': invalid, 'has-validated': validated}, className)}>
            <textarea title={title}
                      maxLength={maxLength}
                      value={value}
                      rows={rows}
                      cols={cols}
                      readOnly={readOnly}
                      disabled={disabled}
                      onChange={this.onChange}
                      onBlur={this.onBlur}
                      onKeyDown={this.onKeyDown}/>
            <ErrorMessage showErrors={showErrors} invalid={invalid} errors={errors}/>
        </div>
    }
}
